<template>
	<view>
		<u-sticky>
			<view class="header">
				<u-search
					placeholder="请输入会员ID"
					v-model="keyword"
					shape="square"
					:showAction="false"
					@search="searchlist"
				></u-search>
			</view>
			<view class="button">
				<view class="btn" @click="show = true">{{ payTypeName }}</view>
				<view class="btn" @click="show1 = true">{{ payWayName }}</view>
			</view>
			<u-picker
				:show="show"
				:columns="payTypeList"
				keyName="name"
				@confirm="confirm"
				@cancel="show = false"
			></u-picker>
			<u-picker
				:show="show1"
				:columns="payWayList"
				keyName="name"
				@confirm="confirm1"
				@cancel="show1 = false"
			></u-picker>
		</u-sticky>
		<view class="content">
			<view class="box" v-for="item in recordList">
				<view class="box-top">
					<view class="box-three">
						<view class="one">{{ item.userName }} {{ item.userId }}</view>
						<view class="two">订单编号：{{ item.orderNo }}</view>
						<view class="two">支付时间：{{ item.payTime }}</view>
						<view class="two">
							支付状态：
							<u-tag v-if="item.payRecordStatus == 0" text="待支付"></u-tag>
							<u-tag v-else-if="item.payRecordStatus == 1" type="warning" text="支付中"></u-tag>
							<u-tag v-else-if="item.payRecordStatus == 2" type="success" text="支付成功"></u-tag>
							<u-tag v-else-if="item.payRecordStatus == 3" type="info" text="支付失败"></u-tag>
						</view>
						<view class="two">
							支付类型：
							<text v-if="item.payType == 0">商城订单</text>
							<text v-else-if="item.payType == 1">会员购买</text>
							<text v-else-if="item.payType == 2">余额充值</text>
							<text v-else-if="item.payType == 3">优惠买单</text>
							<text v-else-if="item.payType == 4">线下买单</text>
							<text v-else-if="item.payType == 5">考试系统支付</text>
						</view>
						<view class="two">
							支付方式：
							<text v-if="item.payWay == 0">微信支付</text>
							<text v-else-if="item.payWay == 1">微信支付</text>
							<text v-else-if="item.payWay == 2">支付宝支付</text>
							<text v-else-if="item.payWay == 3">积分支付</text>
							<text v-else-if="item.payWay == 4">余额支付</text>
							<text v-else-if="item.payWay == 5">优惠买单</text>
							<text v-else-if="item.payWay == 6">线下买单</text>
						</view>
						<view class="two" v-if="item.balancePayMoney == 0">
							支付金额：
							<text v-if="item.payWay == 3">{{ item.integralPayMoney }}</text>
							<text v-else="item.payWay == 3">{{ item.payMoney }}</text>
						</view>
						<view class="two" v-else>支付金额：{{ item.balancePayMoney }}</view>
					</view>
				</view>
			</view>
			
			<view class="none_list_box" style="margin-top: 200rpx;" v-if="recordList.length===0">
				<u-empty mode="data" ></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
import { searchPayRecordList, adminUpdateUserInfo, searchUserInfoById } from '../../../utils/api.js';
export default {
	data() {
		return {
			keyword: '',
			show: false,
			show1: false,
			payTypeName: '全部类型',
			payType: -1,
			payTypeList: [
				[
					{
						name: '全部类型',
						id: -1
					},
					{
						name: '商城订单',
						id: 0
					},
					{
						name: '会员购买',
						id: 1
					},
					{
						name: '余额充值',
						id: 2
					},
					{
						name: '优惠买单',
						id: 3
					},
					{
						name: '线下买单',
						id: 4
					}
				]
			],
			payWayName: '全部方式',
			payWay: -1,
			payWayList: [
				[
					{
						name: '全部方式',
						id: -1
					},
					{
						name: '微信支付',
						id: 1
					},
					{
						name: '支付宝支付',
						id: 2
					},
					{
						name: '积分支付',
						id: 3
					},
					{
						name: '余额支付',
						id: 4
					},
					{
						name: '优惠买单',
						id: 5
					},
					{
						name: '线下买单',
						id: 6
					}
				]
			],

			recordList: [],
			categoryList: [[{ categoryName: '更多分类', id: -1 }]],
			search: {
				page: 1,
				size: 10
			},
			categoryName: '更多分类',
			total: 0,
			form: {}
		};
	},
	onLoad(option){
		console.log(89898);
		console.log(option);
		if(option.keyWord){
			this.keyword=option.keyWord
		}
	},
	onShow() {
		this.getRecordList();
	},
	onReachBottom() {
		if (this.recordList.length < this.total) {
			this.search.page++;
			this.getRecordList();
		}
	},
	methods: {
		click(item) {
			this.search.page = 1;
			this.recordList = [];
			this.getRecordList();
		},

		searchlist() {
			this.getRecordList();
			this.keyword = '';
		},
		getRecordList() {
			let data = {
				page: this.search.page,
				size: this.search.size,
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				keyword: this.keyword,
				payType: this.payType,
				payWay: this.payWay,
				businessId: -1
			};
			searchPayRecordList(data).then((res) => {
				if (res.code == 200) {
					if (this.search.page == 1) {
						this.recordList = [];
					}
					let arr = [];
					arr = this.recordList.concat(res.body.list);
					this.recordList = arr;
					this.total = res.body.total;
				}
			});
		},

		confirm(e) {
			console.log(e.value[0].id);
			this.payType = e.value[0].id;
			this.payTypeName = e.value[0].name;
			this.show = false;
			this.getRecordList();
		},
		confirm1(e) {
			console.log(e.value[0].id);
			this.payWay = e.value[0].id;
			this.payWayName = e.value[0].name;
			this.show1 = false;
			this.getRecordList();
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #999;
}
.header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
}
.tags {
	background-color: #fff;
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 80rpx;
	}
}
.button {
	height: 60rpx;
	display: flex;
	padding: 20rpx;
	background-color: #fff;
	.btn {
		width: 200rpx;
		color: #fff;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		background-color: #6da7ff;
		text-align: center;
		margin-right: 30rpx;
	}
}
.content {
	padding: 20rpx;
	.box {
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		.box-top {
			display: flex;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #f5f5f5;
			.box-two {
				// width: 150rpx;
				// height: 150rpx;
				margin-right: 20rpx;
				position: relative;
				border-radius: 10rpx;
				overflow: hidden;
				.tuijian {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.3);
					height: 40rpx;
					width: 100%;
					font-size: 24rpx;
					text-align: center;
					line-height: 40rpx;

					position: absolute;

					left: 0;
					bottom: 0;
				}
				.xiajia {
					width: 150rpx;
					height: 150rpx;
					color: #fff;
					position: absolute;
					left: 0;
					top: 0;
					text-align: center;
					line-height: 150rpx;
				}
			}

			.box-three {
				.one {
					font-weight: 700;
				}
				.two {
					margin: 25rpx 0;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					.text {
						font-size: 26rpx;
						width: 150rpx;
					}
				}
			}
		}
		.box-bottom {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding-top: 20rpx;
			.con {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.con-one {
				}
				.con-two {
					font-size: 26rpx;
					color: #999;
				}
			}
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	.left {
		margin-right: 50rpx;
	}
	.right {
		background-color: #eff6ff;
		border: 1rpx solid #d1e5ff;
		// padding: 20rpx;
		border-radius: 30rpx;
		color: #016eff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tet {
			padding: 15rpx 30rpx;
			border-right: 1rpx solid #d1e5ff;
		}
		.tet:nth-last-child(1) {
			border-right: none;
		}
	}
}
</style>
